import {
  Input,
  RadioGroup,
  Textarea,
  InputNumber,
  Rate,
  Slider,
  DatePicker,
  TimePicker,
  RangePicker
} from 'ant-design-vue'
import { Ref } from 'vue'
import { WidgetOptions, WidgetType } from '../types'
import { initSlots } from '../util'
import Upload from '../widgets/upload'
import Switch from '../widgets/switch'
import Select from '../widgets/select'
import Checkbox from '../widgets/checkbox'
import TreeSelect from '../widgets/treeSelect'
import Cascader from '../widgets/cascader'

const WIDGET_MAP: {
  [key in WidgetType]: any
} = {
  custom: null,
  input: Input,
  textarea: Textarea,
  password: Input.Password,
  number: InputNumber,
  select: Select,
  checkbox: Checkbox,
  radio: RadioGroup,
  rate: Rate,
  slider: Slider,
  switch: Switch,
  cascader: Cascader,
  datePicker: DatePicker,
  rangePicker: RangePicker,
  timePicker: TimePicker,
  treeSelect: TreeSelect,
  upload: Upload
}

export default function useWidgetRender() {
  const renderWidget = (model: Ref<any>, option: WidgetOptions) => {
    const { type, render } = option
    if (type === 'custom' && render) {
      return render(model, option)
    }
    const Widget = WIDGET_MAP[type]
    if (!Widget) return null
    return (
      <Widget
        v-model:value={model.value[option.prop!]}
        {...(option.attrs || {})}
        v-slots={initSlots(option.slots || {})}></Widget>
    )
  }
  return {
    renderWidget
  }
}
